<!DOCTYPE html">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>活动抽奖</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#wheel{
			width: 620px;
			margin: 20px auto 0 auto;
			text-align: center;
			float: right;
		}
		#wheel input{
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			outline: none;
			border-radius: 40px;
			background: #F69B43;
			border:none;
			width: 250px;
			height: 90px;
			font-size: 40px;
			display: block;
			margin: 0 auto;
		}
		#list{
			float: left;

		}
	</style>
</head>

<body>
	<div id="list">
		<p>老村长酒奖品列表</p>
		<p>奖品1：	工具箱一个</p>
		<p>奖品2：	快餐杯奖品</p>
		<p>奖品3：	青花瓷</p>
		<p>奖品4：	电动车</p>
		<p>奖品5：	风扇</p>
		<p>奖品6：	银项链</p>
	</div>
	<div id="wheel">

		<canvas id="wheelcanvas" width="500" height="500"></canvas>

		<input type="button" value="开始抽奖" onClick="spin();" />

	</div>

	<script type="text/javascript">
		var colors = ["#FFF6DB", "#fff", "#FFF6DB", "#FFf", "#FFF6DB", "#FFf"];
		var res = ["奖品1", "奖品2", "奖品3", "奖品4", "奖品5", "奖品6"];
		var startAngle = 0;
		var arc = Math.PI / 3;
		var spinTimeout = null;
		var spinArcStart = 10;
		var spinTime = 0;
		var spinTimeTotal = 0;
		var ctx;
		function draw() {
			drawRouletteWheel();
		}
		function drawRouletteWheel() {
			var canvas = document.getElementById("wheelcanvas");
			if (canvas.getContext) {
				var outsideRadius = 200;
				var textRadius = 150;
				var insideRadius = 100;
				ctx = canvas.getContext("2d");
				ctx.clearRect(0, 0, 500, 500);
				ctx.strokeStyle = "#F69B43";
				ctx.lineWidth = 20;
				ctx.font = 'bold 20px sans-serif';
				for (var i = 0; i < 6; i++) {
					var angle = startAngle + i * arc;
					ctx.fillStyle = colors[i];
					ctx.beginPath();
					ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
					ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
					ctx.stroke();
					ctx.fill();
					ctx.save();
					ctx.fillStyle = "#F69B43";
					ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);

					ctx.rotate(angle + arc / 2 + Math.PI / 2);
					var text = res[i];
					ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
					ctx.restore();
				}
				//Arrow
				ctx.fillStyle = "#F69B43";
				ctx.beginPath();
				ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
				ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
				ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
				ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
				ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
				ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
				ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
				ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
				ctx.fill();
			}
		}
		function spin() {
			spinAngleStart = Math.random() * 10 + 10;
			spinTime = 0;
			spinTimeTotal = Math.random() * 3 + 4 * 1000;
			rotateWheel();
		}
		function rotateWheel() {
			spinTime += 30;
			if (spinTime >= spinTimeTotal) {
				stopRotateWheel();
				return;
			}
			startAngle += (spinAngleStart * Math.PI / 180);
			drawRouletteWheel();
			spinTimeout = setTimeout('rotateWheel()', 30);
		}
		function stopRotateWheel() {
			clearTimeout(spinTimeout);
			var degrees = startAngle * 180 / Math.PI + 90;
			var arcd = arc * 180 / Math.PI;
			var index = Math.floor((360 - degrees % 360) / arcd);

			// ctx.save();
			ctx.font = 'bold 30px sans-serif';
			var text = res[index];
			ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
			// ctx.restore();  
		}
		draw();
	</script>
	<div style="text-align:center;">
	</div>
</body>

</html>